<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="选择要还原的镜像" @ok="handleOk" :confirm-loading="confirmLoading">
            <div>
                <a-form @keyup.enter.native="searchQuery" class="query-list-form" :model="form">
                    <a-form-item>
                        <a-radio-group v-model:value="imageType">
                            <a-radio :value="1">官方镜像</a-radio>
                            <a-radio :value="2">我的镜像</a-radio>
                        </a-radio-group>
                    </a-form-item>

                    <a-form-item label="官方备份镜像" v-if="imageType == 1">
                        <a-cascader v-model:value="form.image" :options="financialImageList" @change="selectImageId"
                            placeholder="请选择" />
                    </a-form-item>
                    <a-form-item label="个人备份镜像" v-if="imageType == 2">
                        <a-select ref="select" v-model:value="form.imageId" allowClear placeholder="请选择">
                            <a-select-option v-for="item in personalImageList" :value="item.imageId">{{ item.imageName
                            }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { getImageList, getMyImageList, getImageId } from 'api/modules/api.gpu'
import { handleInstance } from 'api/modules/api.instance'
import { XsyMessage } from '@/libs/util.toast'

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    instance: {
        type: Object,
        default: {}
    }
});

const form = ref({})
const imageType = ref(1)

const emit = defineEmits(['update:modelValue','handelOpt']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

const financialImageList = ref([])
const getFinancialImageList = () => {
    getImageList().then(res => {
        financialImageList.value = handleData(res.data.framework)
    })
}

// 根据条件筛选镜像ID
const selectImageId = () => {
    const [frameName, frameVer, toolVer, runtimeVer] = form.value.image
    const params = {
        frameName,
        frameVer,
        toolVer,
        runtimeVer
    }
    getImageId(params).then(res => {
        form.value.imageId = res.data.imageId
    })
}

const personalImageList = ref([])
const getPersonalImageList = () => {
    getMyImageList().then(res => {
        personalImageList.value = res.data.Images
    })
}

const handleData = (objData) => {
    const data = { ...objData }
    const arr = []
    arr.push({ label: '框架名称', value: '框架名称', disabled: true })
    for (var i in data) {
        const obj = {}
        obj.label = i
        obj.value = i
        obj.children = []
        obj.children.push({ label: '框架版本', value: '框架版本', disabled: true })
        for (var j in data[i]) {
            const obj1 = {}
            obj1.label = j
            obj1.value = j
            obj1.children = []
            obj1.children.push({ label: 'Cuda版本', value: 'Cuda版本', disabled: true })
            for (var k in data[i][j]) {
                const obj2 = {}
                obj2.label = k
                obj2.value = k
                obj2.children = data[i][j][k].map(item => {
                    return {
                        label: item,
                        value: item
                    }
                })
                obj2.children.unshift({ label: 'Python版本', value: 'Python版本', disabled: true })
                obj1.children.push(obj2)
            }
            obj.children.push(obj1)
        }
        arr.push(obj)
    }

    return arr
}

getFinancialImageList()
getPersonalImageList()

// 确定按钮的回调
const confirmLoading = ref(false)
const handleOk = () => {
    const params = {
        instanceId: props.instance?.Instance?.instanceId,
        method: 'reset',
        subject: 'instance',
        imageId: form.value.imageId
    }
    confirmLoading.value = true
    handleInstance(params).then(res => {
        confirmLoading.value = false
        if (res.code == 0) {
            emit('update:modelValue', false)
            emit('handelOpt', props.instance?.Instance?.instanceId)
        }
    }).catch(() => {
        confirmLoading.value = false
    })
};

</script>

